
// Web. Render in DOM
// import ReactDOM from 'react-dom';
import { PDFViewer, Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer'

// Register font
// Font.register({ family: 'Roboto', src: source });
// fontFamily: 'Roboto',

Font.registerEmojiSource({
  format: 'png',
  url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
});

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
        <Text>Section #1</Text>
        <Text>Section #1</Text>
        <Text>Section #1</Text>
      </View>
    </Page>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #2</Text>
        <Text>Section #1🤔</Text>
        <Text>Section #1🐩</Text>
        <Text>Section #1🚢</Text>
      </View>
    </Page>
  </Document>
);


const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

export default App;
// ReactDOM.render(<App />, document.getElementById('root'));